import Image from 'next/image'
import Link from 'next/link'
import Footer from '../components/footer'
import Header from '../components/header'
import NumList from '../components/custom'
// import styles from '../styles/Home.module.css'


// ----------------------
// where render Home page
// ----------------------
export default function Home() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-2">
      <Header>Tspoty Website</Header>

      <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
        <h1 className="text-7xl font-bold">
          The Nav for{' '}
          <div className="text-blue-600 hover:bg-black hover:underline inline-block">
            Tspoty
          </div>
        </h1>

        <p className="mt-3 text-2xl">
          Tspoty的导航页
        </p>

        <div className="mt-6 flex max-w-4xl flex-wrap items-center justify-around sm:w-full">

          <Link href="/posts/Gallery">
          <div className="cursor-pointer mt-6 w-100 border-double rounded-xl border-8 p-8 text-left hover:text-blue-600 focus:text-blue-600 w-96">
            <h3 className="text-2xl font-bold"><NumList>1</NumList> 展览页&rarr;</h3>
            <p className="mt-4 text-xl">
                一些自己参与的事、课程、灵感瞬间的展示
            </p>
          </div>
          </Link>

          <Link href="/posts/ContractMe">
          <div className="cursor-pointer mt-6 w-100 border-double rounded-xl border-8 p-8 text-left hover:text-blue-600 focus:text-blue-600 w-96">
            <h3 className="text-2xl font-bold"><NumList>2</NumList> 联系我&rarr;</h3>
            <p className="mt-4 text-xl">
                如果你对展览页中的零星十分感兴趣的话
            </p>
          </div>
          </Link>

        </div>

      </main>

      <Footer></Footer>
    </div>
  )
}
